<template>
  <div>
    <h1>MenusList:</h1>
    <el-card style="width: 100%">
      <template #header>
        <div class="card-header">
          <h3>菜单列表</h3>
          <el-button type="primary" @click="$router.push('/menu/create')">添加菜单列表</el-button>
        </div>
      </template>
      <el-table :data="menuList" border style="width: 100%">
        <el-table-column v-for="item in allList" :key="item.prop" :prop="item.prop" :label="item.label" :align="item.align"></el-table-column>
        <el-table-column prop=" " label="操作" align="center" v-slot="scoped">
          <el-button type="primary"
            @click="$router.push({ name: 'editMenu', params: { id: scoped.row.id } })">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scoped.row.id)">删除</el-button>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="js">
import { getAllMenu, deleteMenu, getMenuById } from '@/api/menu';
import { ElMessage } from 'element-plus';
export default {
  name: "MenuList",
  data() {
    return {
      menuList: [],
      allList: [
        { prop: "id", label: "序号", align: "center" },
        { prop: "href", label: "路由地址", align: "center" },
        { prop: "name", label: "菜单名称", align: "center" },
        { prop: "level", label: "菜单层级", align: "center" },
        { prop: "icon", label: "菜单图标", align: "center" },
        { prop: "description", label: "菜单描述", align: "center" },
        { prop: "shown", label: "显示隐藏", align: "center" },
      ],
    };
  },
  created() {
    this.getMenuList();
    this.getMenuInfoById();
  },
  methods: {
    getMenuList() {
      getAllMenu().then((res) => {
        this.menuList = res.data;
        if (res.data.code === '000000') {
          this.menuList = res.data.data;
        } else {
          console.log("获取失败@-@！");
        }
      }).catch((err) => {
        console.log(err, "获取失败");
      });
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 调用删除菜单接口
        deleteMenu(id).then((res) => {
          if (res.data.code === '000000') {
            // 刷新菜单列表
            this.getMenuList();
            ElMessage.success("删除成功！");
            console.log("删除菜单成功");
          } else {
            ElMessage.error("删除失败！");
          }
        }).catch((err) => {
          console.log(err, "删除菜单失败");
        });
      }).catch(() => {
        // 取消删除
        ElMessage.info("已取消删除");
        return;
      });
    },


    //编辑菜单时获取菜单详情
    getMenuInfoById() {
      getMenuById().then((res) => {
        if (res.data.code === '000000') {
          // console.log("获取菜单成功！");
        } else {
          console.log("获取菜单失败！");
        }
      }).catch((err) => {
        console.log(err, "获取菜单失败！");
      });
    },
  },
};
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}
</style>